<script setup>
const attrs = useAttrs()

const props = defineProps({
  bodyClassName: String,
})

const slots = useSlots()

const dialogRef = ref()

const size = ref()

const style = computed(() => {
  if (size.value) {
    const { width, height } = size.value
    return {
      resize: 'both',
      transform:
        attrs.fullscreen !== undefined && attrs.fullscreen !== false
          ? null
          : `translate(-${Math.trunc(width / 2)}px, -${Math.trunc(height / 2)}px)`,
    }
  }
  return null
})

function open() {
  size.value = useElementSize(dialogRef.value.dialogContentRef.$el)
}
</script>

<template>
  <el-dialog
    ref="dialogRef"
    v-bind="attrs"
    :class="['fiz-eim-dialog', attrs.fullscreen !== undefined && attrs.fullscreen !== false && 'fullscreen']"
    @open="open"
    :style="style">
    <template #header>
      <slot name="header"></slot>
    </template>
    <div
      :class="[props.bodyClassName, 'fiz-eim-dialog-body']"
      :style="{
        height: attrs.fullscreen !== undefined && attrs.fullscreen !== false ? `${size?.height - 55}px` : null,
      }">
      <slot></slot>
    </div>
    <template v-if="slots.footer" #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>
